<template>
	<div id="page">
		<el-card
			shadow="hover"
			style="
				height: 30vh;
				width: 25vw;
				display: flex;
				justify-content: center;
			"
		>
			<div>
				<div style="font-weight: bold; width: 100%; text-align: center">
					验证码验证
				</div>

				<div style="margin-top: 2vh">
					<el-input v-model="code" placeholder="区分大小写">
						<template #prepend>验证码</template>
					</el-input>
				</div>
				<div @click="codeRefresh" style="margin-top: 1vh">
					<el-tooltip content="看不清？点我刷新" placement="right">
						<div v-html="codeImg"></div>
					</el-tooltip>
				</div>
				<div
					style="
						display: flex;
						justify-content: center;
						margin-top: 4vh;
					"
				>
					<el-button
						@click="verifySubmit"
						type="success"
						plain
						style="height: 5vh; width: 5vw"
						>提交</el-button
					>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
let codeImg = ref('');
let code = ref('');
const emits = defineEmits(['verify']);
const verifySubmit = () => {
	if (code.value === '') {
		return ElNotification({
			title: 'Warning',
			message: '验证码未输入',
			type: 'warning',
		});
	}
	return emits('verify', code.value);
};

const codeRefresh = async () => {
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/createCode',
			method: 'get',
		});
		if (res.data.state === 'ok') {
			sessionStorage.setItem('code', res.data.token);
			codeImg.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		return ElNotification({
			title: 'Error',
			message: '服务器错误',
			type: 'error',
		});
	}
};

onMounted(async () => {
	codeRefresh();
});
</script>

<style scoped>
#page {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	backdrop-filter: blur(10px);
}
</style>
